import QtQuick 2.11
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.11
import FluentUI

/** EMColumnImageWrapper.qml
  *  此组建为EMGradeChart的封装，设置了一个合适的宽高用于存储组建
  *  对外提供setChartData,用于切换展示内容
  *  此组建只能使用在FluScrollablePage下
  */

FluPage{
    id: root
    height: 500
    Layout.fillWidth: true

    property string title: "chart"

    Rectangle{
        width: root.width
        height: root.height
        border.color: "black"
        border.width: 1

        Row{
            Rectangle{
                id: row2
                width: Math.max(40, Math.min(root.width, 60))
                height: root.height
                border.color: "black"
                border.width: 1

                Label {
                    text: title
                    width: parent.width
                    height: parent.height
                    font.pixelSize: 16
                    font.bold: true
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                }
            }
            Rectangle{
                width: root.width - row2.width
                height: root.height
                border.color: "black"
                border.width: 1

                EMGradeChart{
                    id: chart
                    width: parent.width
                    height: parent.height - 10
                    anchors.margins: 1
                }
            }
        }
    }

    function setChartData(chartArray){
        chart.setChartData(chartArray)
    }
}
